<template>
	<view class="move-boxs bg-white radius padding-xs" @click.stop="handleClickItem">
		<view>
			<video :id="props.ids" style="width: 100px;height: 70px;" class="radius" :src="props.value" autoplay loop
				:muted="isMuted" :show-play-btn="true" :controls="true" objectFit="cover"></video>
			<view class="text-center text-size-10 text-menu-color">{{props.title}}</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		ref, onMounted
	} from 'vue';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const isMuted = ref(true)
	const props = defineProps({
		ids: {
			type: String,
			default: 'mVideo'
		},
		value: {
			type: String,
			default: ''
		},
		icon: {
			type: String,
			default: 'repairfill'
		},
		title: {
			type: String,
			default: '产品视频'
		}
	});
	const videoContext = ref()
	onMounted(() => {

	})
	const pos = ref({
		x: 0,
		y: 0
	})
	const posOld = ref({
		x: 0,
		y: 0
	})
	let windowWidth = 0
	uni.getSystemInfo({
		success: (e : any) => {
			windowWidth = e.windowWidth - 70
			pos.value.x = windowWidth
			pos.value.y = e.windowHeight * 0.1
			console.log(e.windowWidth)
		}
	});
	const onChange = (e : any) => {
		//console.log(e.detail.x, windowWidth)
		if (e.detail.x >= windowWidth) {
			//posOld.value.x = windowWidth
			pos.value.x = windowWidth
		} else {
			posOld.value.x = e.detail.x
		}

		posOld.value.y = e.detail.y
	}
	const handleClickItem = (e : any) => {
		// videoContext.value = uni.createVideoContext(props.ids)
		// videoContext.value.requestFullScreen();
		// videoContext.value.showStatusBar();
		isMuted.value = !isMuted.value
		emit('action', e)
	};
</script>

<style lang="scss" scoped>
	.move-boxs {
		position: fixed;
		bottom: 40vh;
		right: 0.5rem;
		pointer-events: all;
		z-index: 9999;
	}
</style>